<template>
    <div>
        <tab>
            <tab-item selected @on-item-click="onItemClick">近七日下单情况</tab-item>
            <tab-item @on-item-click="onItemClick">资金统计</tab-item>
            <tab-item @on-item-click="onItemClick">发车统计</tab-item>
        </tab>
        <div v-if="index==0">
            <seven-days :obj="obj" :colors="colors"></seven-days>
        </div>
        <div v-if="index==1">
            <funds-report :obj="obj" :colors="colors"></funds-report>
        </div>
        <div v-if="index==2">
            <depart-report :obj="obj" :colors="colors"></depart-report>
        </div>
    </div>
</template>



<script>
import Vue from "vue";
import { Tab, TabItem } from "vux";

import axios from "@/api/axios";
import api from "@/api/base.api";

import SevenDays from "@/views/report/SevenDays";
import FundsReport from "@/views/report/FundsReport";
import DepartReport from "@/views/report/DepartReport";

var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
require("echarts/lib/chart/pie");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");

Vue.prototype.$echarts = echarts;

var colorList = [
  "#1CC466",
  "#6198FF",
  "#624BF3",
  "#44DDC1",
  "#93C1FF",
  "#72D572",
  "#A5DBFF",
  "#085A00",
  "#6495ed",
  "#0AA08E",
  "#0058C9",
  "#ff7f50",
  "#ff69b4",
  "#da70d6",
  "#ba55d3",
  "#cd5c5c",
  "#ffa500",
  "#ff6347",
  "#7b68ee",
  "#00fa9a",
  "#ffd700",
  "#6699FF",
  "#ff6666",
  "#3cb371",
  "#b8860b",
  "#30e0e0"
];
export default {
  name: "overView",
  components: {
    Tab,
    TabItem,
    SevenDays,
    FundsReport,
    DepartReport
  },
  data() {
    return {
      index: -1,
      colors: colorList,
      obj: {}
    };
  },
  mounted() {
    this.fetchDraw();
  },
  methods: {
    onItemClick(index) {
      this.index = index;
    },
    fetchDraw() {
      var _this = this;
      api
        .reportDetail(
          this.$route.params.companyCode,
          this.$route.params.userCode
        )
        .then(rtn => {
          if (rtn.code == 200) {
            _this.obj = rtn.data;
            _this.index = 0;
          } else {
            _this.$vux.toast.text(rtn.message);
          }
        });
    }
  }
};
</script>
<style lang="less">
@import "../../assets/css/report.less";
.ml-65 {
  margin-left: 65px;
}
.mt-15 {
  margin-top: 15px;
}
.divh-15 {
  height: 15px;
}
a {
  text-decoration: none;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
.p-r-l-15{padding:0px 15px;}
.p-35-15{padding:35px 15px;}
.w-135{
    width:135px;
}
</style>
